import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:x_core/components/x_line.dart';
import 'package:x_project/res/colors.dart';
import 'package:x_project/res/dimens.dart';

/// Created by XieXin on 2020/3/23.
/// 自定义AppBar
class XAppBar extends StatelessWidget implements PreferredSizeWidget {
  ///标题
  final String title;

  ///标题
  final Widget? titleWidget;

  ///标题是否居中 true是
  final bool isTitleCenter;

  ///背景颜色
  final Color? bgColor;
  final IconData? backIcon;
  final bool isBack;
  final Color? backColor;
  final VoidCallback? onBack;
  final String actionName;
  final Color? actionColor;
  final VoidCallback? onNamePressed;
  final Widget? rightWidget;

  final IconData? actionIcon;
  final VoidCallback? onIconPressed;

  final bool offstageDivider;

  const XAppBar({
    Key? key,
    this.title = "",
    this.titleWidget,
    this.isTitleCenter = true,
    this.bgColor,
    this.backIcon,
    this.isBack = true,
    this.onBack,
    this.backColor,
    this.actionName = "",
    this.actionColor,
    this.onNamePressed,
    this.rightWidget,
    this.actionIcon,
    this.onIconPressed,
    this.offstageDivider = true,
  }) : super(key: key);

  @override
  Size get preferredSize {
    return Size.fromHeight(Dimens.appBarHeight.h);
  }

  @override
  Widget build(BuildContext context) {
    Color bg = bgColor ?? Get.theme.primaryColor;
    SystemUiOverlayStyle overlayStyle =
        ThemeData.estimateBrightnessForColor(bg) == Brightness.dark
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark;
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: overlayStyle,
      child: Material(
        color: bg,
        child: SafeArea(
          child: Stack(
            alignment: Alignment.centerLeft,
            children: <Widget>[
              Semantics(
                namesRoute: true,
                header: true,
                child: titleWidget ??
                    Container(
                      alignment: isTitleCenter
                          ? Alignment.center
                          : Alignment.centerLeft,
                      width: double.infinity,
                      margin: EdgeInsets.symmetric(
                        horizontal: 88.w,
                      ),
                      child: Text(
                        title,
                        style: TextStyle(
                          fontSize: 36.sp,
                          color: XColors.appBarTitleColor,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
              ),
              _getBack(context),
              rightWidget == null
                  ? _getAction(context)
                  : Positioned(
                      right: 0.0,
                      child: rightWidget!,
                    ),
              Positioned(
                left: 0,
                bottom: 0,
                child: Offstage(
                  offstage: offstageDivider,
                  child: SizedBox(
                    width: ScreenUtil().screenWidth,
                    child: XLine.getDivider(context),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _getBack(context) {
    return isBack
        ? IconButton(
            onPressed: () {
              if (onBack != null) onBack!();
              FocusScope.of(context).unfocus();
              Navigator.maybePop(context);
            },
            tooltip: "返回",
            icon: Container(
              alignment: Alignment.center,
              child: Icon(
                backIcon ?? const IconData(0xe857, fontFamily: "Icons"),
                size: 42.w,
                color: backColor ?? Colors.white,
              ),
            ),
          )
        : const SizedBox.shrink();
  }

  Widget _getAction(context) {
    return Positioned(
      right: 0.0,
      child: Row(
        children: [
          actionName.isNotEmpty
              ? TextButton(
                  onPressed: onNamePressed,
                  child: Text(
                    actionName,
                    style: TextStyle(fontSize: 32.sp, color: actionColor),
                    key: const Key("actionName"),
                  ),
                )
              : const SizedBox.shrink(),
          Offstage(
            offstage: actionIcon == null,
            child: IconButton(
              onPressed: onIconPressed,
              icon: Container(
                alignment: Alignment.center,
                child: Icon(
                  backIcon,
                  size: 42.w,
                  color: actionColor ?? Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
